<template>
  <div>
    <Particles
      :id="pid"
      :particlesInit="particlesInit"
      :particlesLoaded="particlesLoaded"
      :options="options"
    />
  </div>
</template>
<script lang="ts" setup>
import { loadSlim } from "tsparticles-slim";
const props = defineProps({
  pid: {
    type: String,
    default: "tsparticles",
  },
  // 粒子数量
  number: {
    type: Number,
    default: 80,
  },
  // 粒子速度
  speed: {
    type: Number,
    default: 6,
  },
  // 粒子颜色
  color: {
    type: String,
    default: "#74c1e8",
  },
  // 粒子形状 circle 圆形 square 方形 triangle 三角形 polygon 五边形 star 星形 image 图片
  shape: {
    type: String,
    default: "circle",
  },
  // 粒子为image时的图片地址
  url: {
    type: String,
    default: "",
  },
  // 粒子移动方向 none 无 top 上 top-right 右上 right 右 bottom-right 右下 bottom 下 bottom-left 左下 left 左 top-left 左上
  direction: {
    type: String,
    default: "none",
  },
  // 最小粒子
  minSize: {
    type: Number,
    default: 1,
  },
  // 最大粒子
  maxSize: {
    type: Number,
    default: 10,
  },
  // 是否显示连接线
  link: {
    type: Boolean,
    default: true,
  },
  // 粒子连接颜色
  linkColor: {
    type: String,
    default: "#fff",
  },
  // 粒子连接距离
  linkDistance: {
    type: Number,
    default: 150,
  },
  // 背景颜色
  beColor: {
    type: String,
    default: "transparent",
  },
  // 粒子透明度
  opacity: {
    type: Number,
    default: 0.5,
  },
  // 粒子碰撞效果
  collisions: {
    type: Boolean,
    default: false,
  },
  // 点击效果 push 生成粒子 repulse 击退粒子 bubble 放大粒子 remove 删除粒子
  click: {
    type: String,
    default: "grab",
  },
  // 悬浮效果 none 无 repulse 击退 bubble 放大 grab 抓取
  hover: {
    type: String,
    default: "none",
  },
});

const options = {
  background: {
    color: {
      value: props.beColor, // 背景颜色
    },
  },
  fpsLimit: 120, // 帧数限制
  interactivity: {
    events: {
      onClick: {
        enable: ["push", "repulse", "bubble", "remove"].includes(props.click),
        mode: props.click, // 点击事件效果
      },
      onHover: {
        enable: ["repulse", "bubble", "grab"].includes(props.hover),
        mode: props.hover, // 鼠标悬停效果
      },
      resize: true,
    },
    modes: {
      // 粒子放大效果
      bubble: {
        distance: 400,
        duration: 2,
        opacity: 0.8,
        size: 40,
      },
      // 粒子生成效果
      push: {
        quantity: 4, // 生成粒子数量
      },
      // 粒子击退效果
      repulse: {
        distance: 100,
        duration: 0.4,
      },
      // 粒子连线效果
      grab: {
        distance: 200,
        lineLinked: {
          opacity: 0.5,
        },
        links: {
          opacity: 0.5,
        },
      },
      // 粒子消失效果
      remove: {
        quantity: 4, // 删除粒子数量
      },
    },
  },
  particles: {
    color: {
      value: props.color, // 粒子颜色
    },
    links: {
      enable: props.link, // 连线开关
      color: props.linkColor, // 连线颜色
      distance: props.linkDistance, // 连线距离
      opacity: props.opacity, // 连线透明度
      width: 1, // 连线宽度
    },
    collisions: {
      enable: props.collisions, // 碰撞开关
    },
    move: {
      direction: props.direction, // 粒子移动方向
      enable: true,
      outModes: {
        default: "out", // 默认 bounce 碰撞回弹  out 边界消失
      },
      random: true, // 随机移动
      speed: props.speed, // 移动速度
      straight: false, // 粒子直线移动
    },
    number: {
      density: {
        // 密度配置
        enable: true,
        area: 500,
      },
      value: props.number, // 粒子数量
    },
    opacity: { value: props.opacity }, // 粒子透明度
    shape: {
      type: props.shape, // 粒子形状
      image: { src: props.url }, // 粒子为image时的图片地址
    },
    size: { value: { min: props.minSize, max: props.maxSize } }, // 粒子大小
  },
  detectRetina: true, // 检测高清屏
};

const particlesInit = async (engine: any) => {
  await loadSlim(engine);
};

const particlesLoaded = async (_container: any) => {
  // console.log("粒子容器加载完成：", container);
};
</script>
<style lang="scss" scoped></style>
